<template>
  <div>
    <div class="listCls">
      <router-link to="/list/123">
        <el-button type="primary" @click="onBtn(123)">123</el-button>
      </router-link>
      <router-link to="/list/456">
        <el-button type="primary" @click="onBtn(456)">456</el-button>
      </router-link>
      <router-link to="/list/789">
        <el-button type="primary" @click="onBtn(789)">789</el-button>
      </router-link>
      <router-link to="/list/object">
        <el-button type="primary">object</el-button>
      </router-link>
    </div>
    <router-view :proName="proName"></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      proName: 123
    }
  },
  methods: {
    onBtn(name) {
      this.proName = name
    }
  },
  watch: {
    '$route.path': {
      handler(newUrl, oldUrl) {
        if (newUrl === '/list' || (newUrl === '/list/' && oldUrl)) {
          this.$router.push({ path: oldUrl })
        }
      }
    }
  },
  beforeCreate() {
    let path = this.$route.path
    if (path === '/list' || path === '/list/') {
      this.$router.push({ path: '/list/123' })
    }
  },
  props: {},
  setup(props, context) {}
}
</script>
<style lang="less" scoped>
.listCls {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  a {
    text-decoration: none;
  }
  button {
    margin: 0 20px;
  }
}
</style>
